<template>
	<view class="u-page" style=" padding: 3px;">
		<u-row customStyle="margin-bottom: 10px">
			<u-col span="6">
				<div class="title"
					style="font-size:14px; color:white; background-color:rgb(66,149,244) ; border-radius: 10px; padding: 10px;">
					<view style=" color:#ddd;">今日收费</view>
					<view style=" font-size: 32px;padding: 4px 0px;">￥{{chargeData.todayAmount}}</view>
					<view><text style=" color: #ddd;">昨日收费:</text> {{chargeData.yesterdayAmount}} 元</view>
					<label><text style='color:#ddd'>本月收费: </text>{{chargeData.monthAmount}} 元</label>

				</div>
			</u-col>
			<u-col span="6" style="padding-left: 10rpx;color:white">
				<view
					style=" border-radius: 10rpx; padding:35rpx; margin-bottom: 10rpx; height: 45%; background-color:rgb(84,188,188) ;">
					今日入场：{{chargeData.todayEnter}}</view>

				<view style="border-radius: 10rpx;padding:35rpx;  height: 45%; background-color:rgb(84,188,188) ;">
					昨日入场：{{chargeData.yesterdayEnter}}</view>
			</u-col>
		</u-row>
		<view>
			<u-tabs :list="tablist" @click="reportTabClick" :current="reportindex">
			</u-tabs>
			<view><l-echart ref="chart" @finished="init"></l-echart></view>

		</view>


		<u-tabbar :value="tabindex" @change="menuChange" :fixed="true" :placeholder="true"
			:safeAreaInsetBottom="true">
			<u-tabbar-item text="首页" icon="home">
			</u-tabbar-item>
			<u-tabbar-item text="入场" icon="car"></u-tabbar-item>
			<u-tabbar-item text="订单" icon="grid-fill"></u-tabbar-item>
			<u-tabbar-item text="统计" icon="calendar"></u-tabbar-item>
		</u-tabbar>

	</view>
</template>

<script>
	import service from '@/util/service.js'

	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'

	import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';


	export default {
		components: {
			LEchart
		},
		data() {
			return {
				reportindex: 0,
				tabindex: 0,
				tablist: [{
					name: '收入',
				}, {
					name: '车流',
				}],
				chargeData: {
					todayAmount: 0,
					yesterdayAmount: 0,
					monthAmount: 0,
					todayEnter: 0,
					yesterdayEnter: 1
				},
				option1: {
					title: {
						// text: '实时垛内温度曲线',
					},
					tooltip: {
						trigger: 'axis',
					},
					// legend: {
					// 	data: ['t','b','c','d'],
					// },
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true,
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: [
							'周一',
							'周二',
							'周三',
							'周四',
							'周五',
							'周六',
							'周日',
						],
					},
					yAxis: {
						type: 'value',
					},
					series: [{
						name: "收费",
						type: 'line',
						stack: '总量',
						data: [0, 0, 0, 0, 0, 0, 0],
					}],
				}

			}
		},
		onShow:function(){
			
			this.getWeekReport(0);
			this.getCharge();
		},
		mounted() {


			this.getWeekReport(0);
			this.getCharge();
		},
		methods: {
			
			menuChange:function(index){
				console.log(index);
				if(index==1){
					uni.navigateTo({
						url:'/pages/addOrder/addOrder'
					})
				}else if(index==2){
					uni.navigateTo({
						url:'/pages/orderList/orderList'
					})
					
				}else if(index==3){
					uni.navigateTo({
						url:"/pages/report/report"
					})
				}
			},
			reportTabClick: function(tab) {

				this.getWeekReport(tab.index)

			},
			getCharge: function() {
				var that = this;
				service.get('/BIZ/charge/querychargereport', {}, function(res) {
					if (res) {
						that.chargeData = res;
					}
				});

			},
			getWeekReport: function(index) {
				var that = this;
				var datalist = [];
				var datalist1 = [];
				var labellist = [];
				service.postJson('/BIZ/charge/queryweekreport', {}, function(res) {
					console.log("返回数据=>", res);
					if (res) {
						res.forEach(function(item) {
							datalist.unshift(item.totalAmount)
							datalist1.unshift(item.totalCount)
							labellist.unshift(item.dateTime.substr(5, 5));
						})
						that.option1.xAxis = {
							type: 'category',
							boundaryGap: false,
							data: labellist

						};
						if (index == 0) {
							that.option1.series = [{
								name: "收费：元",
								type: 'line',
								stack: '总量',
								data: datalist
							}];
						} else {
							that.option1.series = [{
								name: "入场车辆",
								type: 'line',
								stack: '总量',
								data: datalist1
							}];
						}


	that.$refs.chart.setOption(that.option1);


					}
				})

			},
			tabClick: function() {

			},

			async init() {
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chart.init(echarts);
				chart.setOption(this.option1)
			},
		}
	}
</script>

<style>

</style>